﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Cascade Sparkline</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });

            initSpread(spread);
        });

        function initSpread(spread) {
            spread.newTabVisible(false);
            this.initHorizontalSparkline(spread.sheets[0], "Horizontal");
            this.initVerticalSparkline(spread.sheets[1], "Vertical");
        };

        function initHorizontalSparkline(sheet, name) {
            sheet.isPaintSuspended(true);
            sheet.setName(name);

            sheet.addSpan(0, 0, 1, 5);
            sheet.getCell(0, 0).value("Checkbook Register")
                .font("20px Arial")
                .hAlign(spreadNS.HorizontalAlign.center)
                .vAlign(spreadNS.VerticalAlign.center)
                .backColor("purple")
                .foreColor("white");

            sheet.setArray(1, 0, [
                ["","Initial value",815.25, "\u03A3"],
                ["12/11/2012", "CVS", -20],
                ["12/12/2012", "Bank", 100.12],
                ["12/12/2012", "Starbucks", -5.43],
                ["12/12/2012", "Taco Bell", -7.03],
                ["12/13/2012", "From Work",	-534.98],
                ["12/13/2012","From Savings", 1000],	
                ["12/15/2012", "Mexicali Restaurant",-22.35],
                ["12/17/2012", "Staples",-55.50],
                ["12/18/2012", "Cash", 165],	
                ["12/18/2012", "W&P", -58.60],
                ["12/18/2012", "Gas", -15.80],
                ["12/22/2012", "Bookstore", -65.00],
                ["12/23/2012", "Target", -120.65],
                ["1/1/2013", "Rent", -550.00],
                ["","Final value"]
            ]);

            sheet.setColumnWidth(0, 80);
            sheet.setColumnWidth(1, 120);
            sheet.setColumnWidth(2, 80);
            sheet.setColumnWidth(3, 80);
            sheet.setColumnWidth(4, 340);
            sheet.setRowHeight(0, 40);
            sheet.getCells(2, 0, 15, 0).formatter("MM/dd/yyyy");
            sheet.getCells(1, 2, 16, 2).formatter("#,###.00");
            sheet.getCells(2, 3, 15, 3).formatter("#,###.00");

            sheet.setFormula(2, 3, "=C3 + C2");
            var r;
            for (r = 4; r <= 16; r++) {
                sheet.setFormula(r - 1, 3, "=C" + r + " + D" + (r - 1));
            }

            for(r = 1; r <=17; r++) {
                sheet.setRowHeight(r, 24);
            }

            sheet.setFormula(16, 2, "=D16");
            sheet.getCell(1, 3).hAlign(1);
            sheet.getCells(1, 1, 1, 2).font("bold 14px Georgia");
            sheet.getCells(16, 1, 16, 2).font("bold 14px Georgia");

            sheet.setBorder(new spreadNS.Range(1, 0, 1, 5), new spreadNS.LineBorder("black", spreadNS.LineStyle.thin), { bottom: true });
            sheet.setBorder(new spreadNS.Range(16, 0, 1, 5), new spreadNS.LineBorder("black", spreadNS.LineStyle.medium), { top: true });

            for (var i = 1; i <= 16; i++) {
                sheet.setFormula(i, 4, '=CASCADESPARKLINE(C2:C17,'+ i +',B2:B17,,,"#8CBF64","#D6604D",false)');
            }
           
            sheet.isPaintSuspended(false);
        }

        function initVerticalSparkline(sheet, name) {
            sheet.isPaintSuspended(true);
            sheet.setName(name);

            sheet.setRowHeight(0, 50);

            sheet.addSpan(0, 0, 1, 6);
            sheet.getCell(0, 0).value("Checkbook Register")
                .font("20px Arial")
                .hAlign(spreadNS.HorizontalAlign.center)
                .vAlign(spreadNS.VerticalAlign.center)
                .backColor("purple")
                .foreColor("white");

            sheet.setRowHeight(3, 200);

            sheet.setArray(1, 0, [
                ["Initial", "Tips", "Car", "Foods", "Saving", "Final"],
                [345, 400, -115.2, -87.34, -100]
            ]);

            sheet.setFormula(2, 5, "=Sum(A3:E3)");
            sheet.getCells(2, 0, 2, 5).formatter(".00");
            for (var c = 0; c < 6; c++) {
                sheet.setColumnWidth(c, 100);
                sheet.setFormula(3, c, '=CASCADESPARKLINE(A3:F3,' + (c + 1) + ',A2:F2,,,"#8CBF64","#D6604D",true)');
            }

            sheet.getCells(1, 0, 2, 0).font("bold 14px Georgia");
            sheet.getCells(1, 5, 2, 5).font("bold 14px Georgia");
            sheet.setBorder(new spreadNS.Range(1, 0, 3, 1), new spreadNS.LineBorder("black", spreadNS.LineStyle.thin), { right: true });
            sheet.setBorder(new spreadNS.Range(1, 5, 3, 1), new spreadNS.LineBorder("black", spreadNS.LineStyle.medium), { left: true });

            sheet.isPaintSuspended(false);
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 500px; border: 1px solid gray;"></div>
    </div>
</body>
</html>
